<template>
  <div class="user-list">
    <h3>专辑交互数据列表</h3>
    <el-table :data="tableData" style="width: 100%" >
      <el-table-column prop="index" label="序号" width="320" />
      <el-table-column label="专辑名称" prop="album_name" />
      <el-table-column label="歌手名称" prop="artist_name" />
      <el-table-column label="收藏次数" prop="favorite_count" />
    </el-table>

    <!-- 分页器 -->
    <div class="page">
      <el-pagination :page-size="pageSize" :pager-count="pageSize" layout="prev, pager, next" :total="totalNum"
        @change="changePageFn" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import http from '../../api/http'
import { ta } from 'element-plus/es/locales.mjs'

// // 定义接口，形容对象的结构
// interface User {
//   date: string
//   song_name: string
//   artist_name: string
//   favorite_count: number
//   share_count: number
//   play_count: number
//   id?: number | string
// }

// 专辑列表数据
const tableData = ref<any>([])

// 专辑总数
let totalNum = ref(0)
let page = ref(1)
let pageSize = ref(11)

// 定义函数获取专辑交互数据列表
const albumListFn = async (page = 1, pageSize = 10) => {
  await http.getAlbumFavoriteCount({ page, pageSize }).then(
    content => {
      // console.log(content)
      let { code, total,result } = content;
      if (code == 200) {
        let newArr = result.map((item: any, i: number) => {
          item.index = i + 1;
          return item
        })
        tableData.value = newArr;
        totalNum.value = total;
        console.log(tableData.value);
      }
      else {
        console.log('获取专辑交互数据列表失败')
      }
    }
  )
}

// 点击分页时执行的函数
const changePageFn = (num: number) => {
  // console.log(value)
  page.value = num;
  albumListFn(page.value, pageSize.value);
}

// 初始化歌手交互数据列表
albumListFn(page.value, pageSize.value);

</script>

<style lang="scss">
.user-list {
  h3 {
    margin-bottom: 15px;
  }

}

.page {
  margin-top: 15px;
  background-color: #fff;
  padding: 10px 10px;
}
</style>